<script setup lang='ts'>
import selfApi from '@/apis/selfApi';
import queryIDStore from '@/store/queryIDStore';
import SelfStore from '@/store/SelfStore';
import { ref,onMounted } from 'vue'
import {useRouter} from "vue-router"
const userAvatar = ref()

const router = useRouter()
//获取当前 u_id的头像
onMounted(async()=>{

  userAvatar.value=( await selfApi.getCurrentPeopleByUid( queryIDStore().queryUid)).data
  // console.log(userAvatar.value);
})
</script>
<template>
<div  class="w-8/12 -ml-[220px] mt-1  ">
    
    <div class="flex justify-center items-center gap-3 -mr-10 mb-3">
        <img class=" w-[70px] h-[70px] object-cover  animate-pulse
        rounded-full border-4 border-gray-400 hover:border-green-500 hover:duration-500"
         :src=userAvatar alt="">
        <el-button class="" type="info" size="small" round>关注他</el-button>
     </div>
     
<el-menu
 class="!rounded-lg  flex
     justify-center items-center gap-9"
    mode="horizontal"
    background-color="#cac1c1"
    active-text-color="#a342be"
    default-active="1"
  >


    <router-link :to="{name:'blogger.content.selfInfo.post'}">
       <el-menu-item  index="1">TA的帖子</el-menu-item>
      </router-link>
      
    <router-link :to="{name:'blogger.content.selfInfo.collection'}"> 
       <el-menu-item index="2">TA的收藏</el-menu-item>
      </router-link>
    <router-link :to="{name:`blogger.content.selfInfo.attention`}">
       <el-menu-item index="3">TA的关注</el-menu-item>
      </router-link>
    <router-link :to="{name:'blogger.content.selfInfo.fans'}">  
         <el-menu-item index="4">TA的粉丝</el-menu-item>
        </router-link>
  
    
  </el-menu>
 

  <!-- 路由访问 -->

 <div class="w-full border shadow-md rounded-lg mt-3 mb-5 ">
   <router-view/>
 </div>
</div>

</template>
<style scoped lang='scss'>


</style>